<template>
  <div>
    <h1>跨多级组件通信-依赖注入</h1>
    <h2 @click="count++">{{ count }}</h2>
    <h2>{{ obj }}</h2>
    <hr />
    <Child />
  </div>
</template>

<script>
import Child from './components/孙子组件.vue'
/**
 * 依赖注入使用步骤：
 * 1. 提供数据=》在组件树某层通过provide函数=>语法：provide('key', data)
 * 2. 接收数据=》在需要用这个注入的数据的子孙组件中接收=》通过inject函数=>语法：inject('key')
 */
import { provide, ref } from 'vue'
export default {
  components: {
    Child
  },
  setup () {
    const count = ref(1)
    const obj = ref({ a: 10 })
    // 注入数据
    provide('count', count)
    provide('obj', obj)

    return { count, obj }
  }
}
</script>

<style lang="scss" scoped>
</style>
